<template>
    <div class="page-wrap">
        <el-divider
            content-position="left">个人封装的一系列vue组件合集（https://gitee.com/lianlizhou/vue2.x-some-components）</el-divider>
        <div>
            <el-table :data="tableData" style="width: 100%" border>
                <el-table-column type="index" label="序号" width="60" align="center">
                </el-table-column>
                <el-table-column prop="name" label="名称" width="140" align="center">
                </el-table-column>
                <el-table-column prop="description" label="说明" align="center">
                </el-table-column>
                <el-table-column prop="address" label="操作" width="120" align="center">
                    <template slot-scope="scope">
                        <el-link type="primary" @click="onClick(scope.row)">演示及说明</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: [
                {
                    name: "二维码组件",
                    path: "/Qrcode",
                    description: "基于qrcode和element-ui开发的二维码组件"
                },
                {
                    name: "文本行轮播组件",
                    path: "/TextRowCarousel",
                    description: "以行为单位，轮播展示文本信息，支持自定义样式和插槽"
                },
                {
                    name: "文本交替滚动指令",
                    path: "/TextAlternateScroll",
                    description: "以指令的形式，让溢出的文本进行左右交替滚动展示"
                },
                {
                    name: "表格轮播组件",
                    path: "/TableCarousel",
                    description: "用于大屏看板展示的表格组件，自动对表格内容进行轮播，支持鼠标悬停，表格内容需要使用插槽自定义"
                },
                {
                    name: "季度选择组件",
                    path: "/Quarter",
                    description: "基于element-ui开发的季度选择组件"
                },
                {
                    name: "数字翻牌器",
                    path: "/DigitalFlop",
                    description: "无缝轮播的数字翻牌器，一般用在大屏看板之中，样式可自行修改源码"
                },
                {
                    name: "拖拽组件",
                    path: "/DragBtn",
                    description: "使用固定定位，可随意拖拽位置的组件"
                }
            ]
        }
    },
    methods: {
        //点击事件
        onClick(row) {
            //路由跳转
            this.$router.push(row.path)
        }
    }
}
</script>

<style scoped>
.page-wrap {
    padding: 20px;
}
</style>
